<template>
  <div class="statistics">
    <div class="statisticsleft">
      <div class="echarts">
        <Card>
          <div class="top">
            <div style="float:left">
              <Select v-model="model1" style="width:200px;margin:5px">
                <Option
                  v-for="item in cityList1"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
              <Select v-model="model2" style="width:200px;margin:5px">
                <Option
                  v-for="item in cityList2"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
              <Select v-model="model3" style="width:200px;margin:5px">
                <Option
                  v-for="item in cityList3"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
              <Button type="success">确认</Button>
            </div>
            <div style="height:50px;"></div>
            <Table border :columns="columns1" :data="data1"></Table>
          </div>
        </Card>
      </div>
      <!-- <div class="button">
        <div id="myChart" :style="{width: '90%', height: '35vh'}"></div>
        <p>算法关联度最高的五个科目</p>
      </div>-->
    </div>
    <div class="statisticsright">
      <div class="echarts">
        <Card>
          <div id="myChart" :style="{width: '90%', height: '50vh'}"></div>
        </Card>
      </div>
      <div class="dispaly">
        <div class="xueke">
          <Card>
            <h2>优势学科</h2>
            <h2>弱势学科</h2>
          </Card>
        </div>
        <div class="suggest">
          <Card>
            <h2>系统分析给出的一些建议:</h2>
            <span>
              1、继续加油
              <br />2、你真的很棒
              <br />3、英语四级马上就要到了
              <br />4、一定要过！
            </span>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      columns1: [
        {
          title: "科目",
          key: "name"
        },
        {
          title: "平均分",
          key: "age"
        },
        {
          title: "优秀人数",
          key: "address"
        },
        {
          title: "挂科人数",
          key: "date1234"
        }
      ],
      data1: [
        {
          name: "数学",
          age: 70,
          address: "10",
          date1234: "5"
        },
        {
          name: "数学",
          age: 70,
          address: "10",
          date1234: "5"
        }
      ],
      cityList1: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        }
      ],
      cityList2: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        }
      ],
      cityList3: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        }
      ],
      model1: "",
      model2: "",
      model3: ""
    };
  },
  mounted() {
    this.showecharts();
  },
  methods: {
    showecharts() {
      var myChart = echarts.init(document.getElementById("myChart"));
      app.title = "世界人口总量 - 条形图";

      let option = {
        title: {
          text: "优秀人数与挂科人数的对比"
          // subtext: '数据来自网络'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["优秀人数", "挂科人数"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: ["数学", "英语", "大学物理", "数据结构", "C语言", "Java"]
        },
        series: [
          {
            name: "优秀人数",
            type: "bar",
            data: [10, 11, 8, 9, 12, 10]
          },
          {
            name: "挂科人数",
            type: "bar",
            data: [2, 3, 3, 3, 4, 6]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
.statistics {
  display: flex;
}
.statisticsleft {
  width: 50%;
  height: 100vh;
  box-sizing: border-box;
  margin: 10px;
  background-color: #eeeeee;
}

.statisticsright {
  width: 50%;
  height: 100vh;
  box-sizing: border-box;
  margin: 10px;
  background-color: #eeeeee;
}
.dispaly {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  /* background-color: #dddddd; */
  margin: 5px;
}
.xueke {
  width: 50%;
  box-sizing: border-box;
  margin: 2px;
  text-align: left;
}
.suggest {
  width: 50%;
  box-sizing: border-box;
  margin: 2px;
  text-align: left;
}
.echarts {
  box-sizing: border-box;
  margin: 5px;
}
</style>
